<!--
 * @Author: your name
 * @Date: 2022-04-30 10:10:55
 * @LastEditTime: 2022-05-07 15:33:59
 * @LastEditors: jjjjwei 1506865174@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \二阶段项目文件\html\user1 copy.html
-->
<!--
 * @Author: your name
 * @Date: 2022-04-29 09:13:07
 * @LastEditTime: 2022-04-30 10:09:04
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \二阶段项目文件\html\user1.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../layui/font/iconfont.woff">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #show{
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            position: absolute;
        }
        #tubiaofont{
            height: 60px;
            background-color: rgb(240, 244, 246);
        }
        #tubiaofont span{
            display: inline-block;
            height: 60px;
            line-height: 60px;
            color: gray;
        }
        #tubiaofont span:first-child{
            color: blue; 
            font-size: 18px;
        }
        #tabdiv{
            width: 100%;
            background-color: white;
            overflow: hidden;
        }
        #tabdiv>p{
            width: 100%;
            padding: 20px 0;
            background-color: rgb(236, 239, 241);
        }
        #tabdiv>table{
            width: 100%;
            text-align: center;
        }
        #addbtn{
            margin: 1%;
        }
        tr{
            border: 1px solid gainsboro;
            height: 50px;
        }
        #DIB{
            width: 100px;
            border: 1px solid gray;
            background-color: rgba(1, 1, 1, 0);
            padding: 5px 0;
            border-radius: 2px;
            margin: 1%;
            cursor: pointer;
        }
        #test1{
            float: right;
        }
        .modalAdd{
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            display: none;
            position: absolute;
        }
        .modalUpdate{
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            display: none;
            position: absolute;
        }
        #popup_box{
            width: 100%;
            background-color: white;
            padding-bottom: 20px;
            overflow: hidden;
        }
        #popup_box>p{
            width: 100%;
            padding: 20px 0;
            margin-bottom: 1.5%;
            background-color: rgb(236, 239, 241);
        }
        #popup_box>p>span{
            display: inline-block;
            width: 100px;
            border: 1px solid gray;
            background-color: white;
            padding: 5px 0;
            text-align: center;
            margin-left: 80%;
            border-radius: 2px;
            cursor: pointer;
        }
        #popup_box>div{
            width: 90%;
            margin: 0 auto;
            border-bottom: 1px dashed black;
            margin-bottom: 2%;
        }
        #popup_box>div>div{
            width: 100%;
            margin: 2% 0;
            padding-left: 10%;
            box-sizing: border-box;
        }
        #popup_box>div>div>span {
            display: inline-block;
            width: 10%;
            text-align: right;
            margin-right: 2%;
        }
        #popup_box>div input ,#popup_box>div select{
            display: inline-block;
            width: 20%;
            height: 38px;
            box-sizing: border-box;
            border: 1px solid black;
            padding-left: 10px;
        }
        #popup_box>div>div>span:nth-of-type(2){
            margin-left: 20%;
        }
        #tijiao,#tijiao1{
            margin-left: 43%;
            width: 6%;
            height: 38px;
        }
        #quxiao,#quxiao1{
            border: 1px solid black;
            box-sizing: border-box;
            width: 6%;
            height: 38px;
            background-color: white;
            color: black
        }
    </style>
</head>
<body>
    <div id="show">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home" ></span>
            <span>&gt;&gt;</span>
            <span>用户</span>
            <span>&gt;&gt;</span>
            <span>用户等级</span>
         </div>
        <div id="tabdiv">
            <p>用户等级列表</p>
            <table>
               <button id="addbtn" class="layui-btn">添加用户等级</button>
               <thead>
                    <tr>
                        <th><input id="allcheck" type="checkbox"></th>
                        <th>ID</th>
                        <th>用户等级</th>
                        <th>所需积分</th>
                        <th>折扣</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="content">
                </tbody>
            </table>
            <button id="DIB">批量删除</button>
        </div>
    </div>
    <!-- 增加的弹出框 -->
    <div class="modalAdd">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home"></span>
            <span>&gt;&gt;</span>
            <span>用户</span>
            <span>&gt;&gt;</span>
            <span>用户等级</span>
            <span>&gt;&gt;</span>
            <span>添加用户等级</span>
        </div>
        <div id="popup_box">
            <p>添加用户等级<span id="fanhui">返回列表</span> </p>
            <div>
                <div>
                    <span>等级名称</span><select name="" id="level">
                        <option value="">普通会员</option>
                        <option value="">高级会员</option>
                        <option value="">金牌会员</option>
                    </select>
                    <span>积分</span><input type="text" name="" id="integral">
                </div>
                
                <div>
                    <span>折扣额</span><input type="text" name="" id="discount">
                </div>
            </div>
            <button id="tijiao" class="layui-btn layui-btn-sm">提交</button>
            <button id="quxiao" class="layui-btn layui-btn-sm" style="background-color: white; color: black;">取消</button>
        </div>
    </div>
    <!-- 修改的弹出框 -->
    <div class="modalUpdate">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home"></span>
            <span>&gt;&gt;</span>
            <span>用户</span>
            <span>&gt;&gt;</span>
            <span>用户等级</span>
            <span>&gt;&gt;</span>
            <span>修改用户等级</span>
        </div>
        <div id="popup_box">
            <p>修改用户等级<span id="fanhui1">返回列表</span> </p>
            <div>
                <div>
                    <span>等级名称</span><select name="" id="level1">
                        <option value="">普通会员</option>
                        <option value="">高级会员</option>
                        <option value="">金牌会员</option>
                    </select>
                    <span>积分</span><input type="text" name="" id="integral1">
                </div>
               
                <div>
                    <span>折扣额</span><input type="text" name="" id="discount1">
                </div>
            </div>
            <button id="tijiao1" class="layui-btn layui-btn-sm">提交</button>
            <button id="quxiao1" class="layui-btn layui-btn-sm" style="background-color: white; color: black;">取消</button>
        </div>
    </div>
    
    <script src="../js/jQuery.3.6.0-uncompress.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/database.js"></script>
    <script src="../js/user2.js"></script>
</body>
</html>